<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<spring:message var="pageTitle" code="agendaAjout.pageTitle" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<spring:url value="/resources/ckeditor/ckeditor.js" var="ckeditor_url" />
<spring:url value="/resources/ckeditor/adapters/jquery.js"
	var="ckeditor_jquery_url" />
<script type="text/javascript" src="${ckeditor_url}">
	<jsp:text/>
</script>
<script type="text/javascript" src="${ckeditor_jquery_url}">
	<jsp:text/>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle}</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="<%=request.getContextPath()%>/resources/css/forms.css"
	rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="<%=request.getContextPath()%>/resources/css/forms.css"
	rel="stylesheet">
<script
	src="<%=request.getContextPath()%>/resources/js/datepicker-fr.js"></script>
<script>
	$(function() {
		$(".datepicker").datepicker();
		$(".datepicker").datepicker("dd/mm/yy", "dateFormat", $(this).val());
	});
</script>
<script>
	function uploadFormData() {
		var oMyForm = new FormData();
		oMyForm.append("file", fileupload.files[0]);
		$.ajax({
		    url: 'http://localhost:8080/PopupCommunication/public/uploadAvatar/uploadImgGroup',
					data : oMyForm,
					dataType : 'text',
					processData : false,
					contentType : false,
					type : 'POST',
					success : function(data) {
						$('#imgEvent').attr('src', data);
						var fichier = data.split("/").pop();
						$('#imgEventGroup').val(fichier);
					}
				});
	}
</script>
</head>
<body>
	<div id="AjoutEvent">
		<h2>Ajouter un événement</h2>
		<div id="contentFormColor">
		<div id="formImg">
		<form id="imgForm" method="post" action="<%=request.getContextPath()%>/public/uploadAvatar/uploadImgGroup"
			enctype="multipart/form-data">
			<div id="result">
				<img id="imgEvent"
					src="<%=request.getContextPath()%>/resources/img/noimg.jpg" alt="" />
			</div>
			<label for="image_upload">Choisissez une image: </label> 
			<input
				type="file" name="fileupload" id="fileupload">								
		</form>
			<Button value="Submit" onclick="uploadFormData()" id="uploadImg">Charger</button>	
		</div>
		<form:form id="formAgenda" method="post" action="."
			modelAttribute="agenda">
			<form:errors path="*">
				<div>
					<spring:message code="error.global" />
				</div>
			</form:errors>
			<fieldset>

				<div class="formseparator">
					<label><spring:message code="agendaAjout.label.titre" /></label>
					<form:input path="titre" cssClass="short"
						cssErrorClass="short error" />
					<form:errors path="titre" htmlEscape="false" />
				</div>

				<div class="formseparator">
					<label><spring:message code="agendaAjout.label.description" /></label>
					<form:textarea path="description" cssClass="short"
						cssErrorClass="short error" />
					<form:errors path="description" htmlEscape="false" />
				</div>

				<div class="formseparator">
					<label><spring:message code="agendaAjout.label.dateDebut" /></label>
					<form:input path="dateDebut" cssClass="short datepicker"
						cssErrorClass="short error" />
					<form:errors path="dateDebut" htmlEscape="false" />
				</div>

				<div class="formseparator">
					<label><spring:message
							code="agendaAjout.label.dateExpiration" /></label>
					<form:input path="dateExpiration" cssClass="short datepicker"
						cssErrorClass="short error" />
					<form:errors path="dateExpiration" htmlEscape="false" />
				</div>

				<div class="formseparator">
					<label><spring:message code="agendaAjout.label.group" /></label>
					<form:select path="groupe" multiple="false">
						<form:options items="${lstGroupes}" itemValue="idGroup"
							itemLabel="name" />
					</form:select>
				</div>
				
			 	<form:hidden  id="imgEventGroup" path="img" value=""/>
			 	
				<div class="formseparator">
					<input type="submit" value="enregistrer"
						class="btn btn-lg btn-primary btn-block" />
				</div>
			</fieldset>
			<script>
				CKEDITOR.replace('description');
			</script>
		</form:form>
		<div style="clear:both;">&nbsp;</div>
		</div>
	</div>
</body>
</html>